<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { Lock, Unlock } from '@element-plus/icons-vue'
import axios from 'axios'
import SunComponent from '@/components/SunComponent.vue'
import BackButton from '@/components/BackButton.vue'
import WarnIcon from '@/components/icons/WarnIcon.vue'
import LadderIcon from '@/components/icons/LadderIcon.vue'
import CoinIcon from '@/components/icons/CoinIcon.vue'
import showMsg from '@/utils/showMsg'
import { removeLogin } from '@/utils/auth'
import fetchCoin from '@/utils/fetchCoin'
import BackgroundImage from '@/components/BackgroundImage.vue'

const coins = ref(0)
const router = useRouter()
const part2Difficulty = ref([false, false, false])
const token = localStorage.getItem('token')
const difficulties = [
  {
    name: '简单',
    value: '0'
  },
  {
    name: '中等',
    value: '1'
  },
  {
    name: '困难',
    value: '2'
  }
]

const enterPart2Game = async (item, difficulty) => {
  if (!item) {
    showMsg({
      type: 'error',
      msg: '现在还无法进入哦，请先游玩其他部分'
    })
  } else {
    // 传递参数 difficulty 难度
    // easy 0
    // medium 1
    // hard 2
    try {
      const response = await axios.get('/api/north/stem/ques/p2', {
        headers: {
          Authorization: token
        },
        params: {
          difficulty: difficulty
        }
      })
      const { code } = response.data
      if (code === 401) {
        showMsg({
          type: 'error',
          msg: '登录过期，请重新登录',
          duration: 1000,
          onClose: () => {
            removeLogin()
            router.push({ name: 'login' })
          }
        })
      } else if (code === 200) {
        const { data } = response.data
        console.log(item)
        console.log(data)
        if (!data) {
          showMsg({
            type: 'error',
            msg: `今天的 PART2 ${difficulty === '0' ? '简单' : difficulty === '1' ? '中等' : '困难'}已经完成啦，小朋友明天再来吧`
          })
        } else router.push({ name: 'part2-game', query: { difficulty } })
      } else throw new Error()
    } catch (e) {
      console.log(e)
      showMsg({
        type: 'error',
        msg: '网络错误，请稍后重试'
      })
    }
  }
}

onMounted(async () => {
  try {
    coins.value = await fetchCoin()
    const response = await axios.get('/api/north/process', {
      headers: {
        Authorization: token
      }
    })
    const { code } = response.data
    if (code === 401) {
      showMsg({
        type: 'error',
        msg: '登录过期，请重新登录',
        duration: 1000,
        onClose: () => {
          removeLogin()
          router.push({ name: 'login' })
        }
      })
    } else if (code === 200) {
      const { data } = response.data
      const { part2 } = data
      // 0 表示不可进入，1、2、3 表示可进入，表示不同难度
      switch (part2) {
        case 0:
          part2Difficulty.value = [false, false, false]
          break
        case 1:
          part2Difficulty.value = [true, false, false]
          break
        case 2:
          part2Difficulty.value = [true, true, false]
          break
        case 3:
          part2Difficulty.value = [true, true, true]
          break
        default:
          throw new Error()
      }
      // 下行仅做测试用
      // part2Difficulty.value = [true, false, true]
    } else throw new Error()
  } catch (e) {
    console.log(e)
    showMsg({
      type: 'error',
      msg: '网络错误，请稍后重试',
      duration: 1000,
      onClose: () => {
        router.push({ name: 'game-select' })
      }
    })
  }
})
</script>
<template>
  <div class="container">
    <background-image />
    <div class="coin">
      <coin-icon :size="64" />
      <span style="font-size: 36px; margin-left: 8px; color: white">{{ coins }}</span>
    </div>
    <back-button
      style="position: absolute; top: 20px; left: 20px; z-index: 101"
      @click="router.push({ name: 'game-select' })"
    />
    <sun-component class="sun" />
    <div class="center">
      <div class="train">
        <div class="engine-front">
          <div class="chimney">
            <div class="smoke"></div>
            <div class="smoke smoke-2"></div>
            <div class="smoke smoke-3"></div>
            <div class="smoke smoke-4"></div>
          </div>
        </div>
        <div class="engine-body"></div>
        <div class="compartment fuel-compartment">
          <warn-icon :size="48" />
          <ladder-icon :size="60" />
        </div>
        <div class="compartment wagon-compartment">
          <div class="compartment-window"></div>
        </div>
        <div class="compartment tail-compartment">
          <div class="compartment-no-window"></div>
          <div class="tail"></div>
        </div>
        <div class="wheel-holder">
          <div class="wheel"></div>
          <div class="wheel wheel-2">
            <div class="wheel-joint"></div>
            <div class="wheel-joint wheel-joint-2"></div>
          </div>
          <div class="wheel wheel-3"></div>
          <div class="wheel wheel-4"></div>
          <div class="wheel wheel-5"></div>
          <div class="wheel wheel-6"></div>
          <div class="wheel wheel-7"></div>
          <div class="wheel wheel-8"></div>
          <div class="wheel wheel-9"></div>
        </div>
      </div>
      <div class="bridge"></div>
    </div>
    <div
      style="
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        z-index: 100;
        padding: 128px 40px 80px 40px;
      "
    >
      <div style="display: grid; gap: 20px; grid-template-columns: 1fr 1fr 1fr; flex: 1">
        <div v-for="(item, index) in part2Difficulty" :key="index">
          <h1 style="font-size: 40px; text-align: center; white-space: nowrap">
            {{ difficulties[index].name }}
          </h1>
          <div
            :class="['base-border', { overlay: !item }]"
            style="height: 70%; display: flex; align-items: center; justify-content: center"
            @click="enterPart2Game(item, difficulties[index].value)"
          >
            <lock color="black" style="width: 80%" v-if="!item" />
            <unlock color="white" style="width: 80%" v-else />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
@import '@/styles/base-train.css';

.sun {
  top: 10%;
  left: 20%;
  position: absolute;
}

.buttons {
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

.base-border {
  background-color: #ffe2b3;
  border: 6px solid #f55a36;
  font-size: 28px;
  border-radius: 20px;
}

.overlay {
  position: relative;
}

.overlay::before {
  box-sizing: border-box;
  content: '';
  position: absolute;
  top: -6px;
  right: -6px;
  bottom: -6px;
  left: -6px;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 20px;
}

.coin {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
